<template>
	<view class="search_box">
		<!-- header -->
		<view class="header">
			<view class="back" @click="backPage">
				<image src="../../static/mineImg/back.png" mode=""></image>
			</view>
			<view class="title">
				搜索
			</view>
		</view>

		<!-- search_main -->
		<view class="search_main">
			<!-- 搜索框 -->
			<view class="search_Inp_box">
				<view class="search_inp">
					<input class="input" type="text" v-model="searchVal" placeholder="多肉芒芒甘露" @change="searchShop" />
					<image class="searchIcon" src="../../static/mineImg/搜索%20(1).png" mode="" @click="btnSearch">
					</image>
					<view id="delIcon" class="delIcon" @click="btnDelSearch" v-if="searchVal===''?false:true">
						<text>×</text>
					</view>
				</view>
				<view class="cancel" @click="cancel">
					取消
				</view>
			</view>
			<!-- 历史搜索记录 -->
			<view class="historyMsg" v-if="search.searchData.length === 0?true:false">
				<view class="historyMsg_title">
					<view class="">
						历史搜索
					</view>
					<view class="del_historyMsg_label" @click="delLabelAll">
						<image src="../../static/mineImg/垃圾桶.png" mode=""></image>
						清除
					</view>
				</view>
				<view class="historyMsg_label">
					<text v-for="(item,index) in search.historyData" :key="index" @click="showDetail(item)">
						{{item.shopName}}
					</text>
				</view>
			</view>
			<!-- 热门推荐 -->
			<view class="hot_recommend" v-if="search.searchData.length === 0?true:false">
				<view class="hot_recommend_title">
					热门推荐
				</view>
				<view class="hot_recommend_label">
					<text v-for="(item,index) in search.hotRecommend" :key="index" @click="showDetail(item)">
						{{item}}
					</text>
				</view>
			</view>
			<!-- 搜索到的商品 -->
			<view class="searchShop" v-if="search.searchData.length === 0?false:true">
				<view v-for="(item,index) in search.searchData" :key="index" @click="Tan(item)">
					<view class="">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="">
						<text>￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				searchVal: '', //搜索框内容
			}
		},
		mounted() {
			// 获取数据
			this.getData()
			// 获取历史记录信息
			this.gethistory()

		},
		computed: {
			...mapState({
				search: "search"
			})
		},
		methods: {
			// mapActions辅助函数
			...mapActions({
				getData: 'search/getData', //获取数据
				gethistory: "search/gethistory", //获取搜索历史记录信息
				addHistory: "search/addHistory", //添加历史记录
				delHistoryAll: "search/delHistoryAll", //删除历史记录
			}),
			// mapMutations辅助函数
			...mapMutations({
				searchShopData: "search/searchShopData", //搜索商品
				filterDetailData: "ordermeal/filterDetailData", //筛选商品详情
			}),


			// 返回上一页
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 取消
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 搜索商品
			btnSearch() {
				let that = this
				// 	console.log(typeof that.searchVal)
				// 	if(typeof that.searchVal !== null){
				// 		uni.showLoading({
				// 			title: '',
				// 		})

				// 		setTimeout(function() {
				// 			// 关闭加载小弹框
				// 			uni.hideLoading()
				// 			// 搜索
				// 			that.addHistory(that.searchVal)

				// 			// 调用搜索数据方法
				// 			that.searchShopData(that.searchVal)
				// 		}, 2000)
				// 	}

			},

			// 清除历史记录
			delLabelAll() {
				this.delHistoryAll()
			},
			// input change事件
			searchShop(e) {
				let that = this
				if (that.searchVal === '') {
					that.searchVal = null
				}
				if (typeof that.searchVal !== 'object') {
					uni.showLoading({
						title: '加载中',
					})
					setTimeout(function() {
						// 关闭加载小弹框
						uni.hideLoading()
						// 搜索
						that.addHistory(that.searchVal)

						// 调用搜索数据方法
						that.searchShopData(that.searchVal)

					}, 500)
				} else {
					uni.showLoading({
						title: '加载中',
					})
					setTimeout(function() {
						// 关闭加载小弹框
						uni.hideLoading()
						// 搜索
						that.addHistory('null')

						// 调用搜索数据方法
						that.searchShopData(that.searchVal)

					}, 500)
				}
			},

			// 清空searchVal
			btnDelSearch(e) {
				this.searchVal = null
				this.searchShop()
			},


			// 跳转到详情页
			showDetail(item) {
				this.filterDetailData(item)
				this.searchVal = null
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/ordermeal/ordermeal?flag=true'
					});
				}, 200)

			},
			Tan(item){
				this.$store.commit('ordermeal/Xqitem', item)
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/ordermeal/ordermeal?flag=true'
					});
				}, 200)
			}
		}
	}
</script>

<style scoped>
	.search_box {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	/* 头部 */
	.search_box .header {
		width: 100%;
		height: 32px;
		padding-top: 25px;
		display: flex;
		align-items: center;
	}

	.search_box .header .back {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.search_box .header .back image {
		width: 25px;
		height: 25px
	}

	.search_box .header .title {
		margin: 0 auto;
		font-size: 15px;
	}

	/* search_main */
	.search_main {
		box-sizing: border-box;
		padding: 10px;
	}

	.search_main .search_Inp_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.search_main .search_Inp_box .search_inp {
		flex: .9;
		position: relative;
		box-sizing: border-box;
	}

	.search_main .search_Inp_box .search_inp .input {
		width: 100%;
		background: rgb(247, 247, 247);
		height: 30px;
		font-size: 13px;
		border-radius: 20px;
		padding-left: 40px;
		box-sizing: border-box;
	}

	.search_main .search_Inp_box .search_inp .searchIcon {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 13px;
		top: 5px;
		box-sizing: border-box;
	}

	.search_main .search_Inp_box .search_inp .delIcon {
		position: absolute;
		right: 10px;
		top: 8px;
		box-sizing: border-box;
		background: rgba(0, 0, 0, .2);
		line-height: 13px;
		width: 15px;
		border-radius: 20px;
		text-align: center;
		z-index: 99
	}

	.search_main .search_Inp_box .search_inp .delIcon text {
		color: #ffffff;
		font-size: 13px;

	}

	/* 取消 */
	.search_main .search_Inp_box .cancel {
		font-size: 14px;
		flex: 0.2;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #878787
	}

	/* 历史搜索 */
	.historyMsg {
		margin: 20px 0;
	}

	.historyMsg .historyMsg_title {
		line-height: 30px;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
	}

	.historyMsg .historyMsg_title .del_historyMsg_label {
		font-size: 12px;
		color: rgb(152, 152, 152);
		display: flex;
		align-items: center;
	}

	.historyMsg .historyMsg_title .del_historyMsg_label image {
		width: 17px;
		height: 17px
	}

	.historyMsg .historyMsg_label {
		display: flex;
		flex-wrap: wrap;
	}

	.historyMsg .historyMsg_label text {
		display: inline-block;
		height: 30px;
		font-size: 12px;
		padding: 0 10px;
		background: rgb(246, 246, 246);
		border-radius: 20px;
		margin-right: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: rgb(152, 152, 154)
	}

	/* 热门推荐 */
	.hot_recommend .hot_recommend_title {
		line-height: 30px;
		font-size: 14px;
	}

	.hot_recommend .hot_recommend_label {
		display: flex;
		flex-wrap: wrap;
	}

	.hot_recommend .hot_recommend_label text {
		display: inline-block;
		height: 30px;
		font-size: 12px;
		padding: 0 10px;
		background: rgb(246, 246, 246);
		border-radius: 20px;
		margin-right: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: rgb(152, 152, 154)
	}

	/* 搜索到商品 */
	.searchShop>view {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20px;
	}

	.searchShop>view view {
		display: flex;
		height: 100%;
		align-items: center;
	}

	.searchShop>view view:nth-child(1) text {
		padding-left: 10px;
		font-size: 14px;
	}

	.searchShop>view view:nth-child(2) text {
		font-size: 14px;
		color: #000000;
		padding-right: 20px;
	}

	.searchShop>view view image {
		width: 40px;
		height: 100%;
	}
</style>
